<%@ page import="java.util.List" %>
<%@ page import="com.qf.pojo.Catalog" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/18
  Time: 9:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>购物购站</title>
    <%--bootstrap样式--%>
    <link type="text/css" rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="/static/css/index.css">

</head>
<body>

<%--jquery--%>
<script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
<%--bootstrap js文件--%>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/static/js/index.js"></script>

<div class="container">
    <div class="row lay1"><%--id="lay1"--%>
        <div class="col-md-3">陕西</div>
        <div class="col-md-1 log">
            <c:if test="${empty(sessionScope.user)}">你好，登录</c:if>
            <c:if test="${!empty(sessionScope.user)}">${sessionScope.user.uname}</c:if>
        </div>
        <div class="col-md-1">免...</div>
        <div class="col-md-1">我的订单</div>
        <div class="col-md-1">我的某东</div>
        <div class="col-md-1">企业采购</div>
        <div class="col-md-1">客户服务</div>
        <div class="col-md-1">网站导购</div>
        <div class="col-md-1">手机导航</div>
        <div class="col-md-1"><a href="user?param=logout">注销登录</a></div>
    </div>
    <div class="row lay2">
        <div class="col-md-2"><img src="/static/img/logo.png"/></div>
        <div class="col-md-10">
            <div class="row top">
                <div class="col-md-8">
                    <div class="col-md-12">
                        <div class="a"><input/></div>
                        <div class="b"><span class="glyphicon glyphicon-search"></span></div>
                    </div>
                    <div class="col-md-1 c">好物11元秒</div>
                    <div class="col-md-1 c">电动车</div>
                    <div class="col-md-1 c">海信巅峰</div>
                    <div class="col-md-1 c">家电双11</div>
                    <div class="col-md-1 c">东东生活</div>
                    <div class="col-md-1 c">潢99减20</div>
                    <div class="col-md-1 c">家电预售</div>
                </div>
                <div class="col-md-2"><a href="/cart?param=show">我的购物车</a></div>
                <div class="col-md-2">二维码</div>
            </div>
            <div class="row bottom">
                <div class="col-md-1">秒杀</div>
                <div class="col-md-1">优惠券</div>
                <div class="col-md-1">PLUS会员</div>
                <div class="col-md-1">品版闪购</div>
                <div class="col-md-1">拍卖</div>
                <div class="col-md-1">东东家电</div>
                <div class="col-md-1">东东超市</div>
                <div class="col-md-1">东东生鲜</div>
                <div class="col-md-1">东东国际</div>
                <div class="col-md-1">东东云</div>
            </div>
        </div>
    </div>

    <div class="row lay3">
        <%--第三层布局--%>
        <%--左:一级类别--%>
        <div class="col-md-2 left">
            <c:forEach var="i" begin="1" end="18" step="1">
                <%--onmouseover：进入的父子节点---onmouseenter:只进入父节点--%>
                <%--onmouseout：退出的父子节点---onmouseleave:只退出父节点--%>
                <div class="col-md-12 menu" onmouseenter="showMenu(1,${i})" onmouseleave="showMenu(2)">
                    <c:forEach items="${requestScope.clist}" var="catalog">
                        <c:if test="${i==catalog.line}">
                            <span><a href="goods?cid=${catalog.cid}">${catalog.cname}</a></span>
                        </c:if>
                    </c:forEach>
                </div>
            </c:forEach>
        </div>
        <%--中--%>
        <div class="col-md-8 middel">
            <div class="inner">
                <div class="pic"><img src="/static/img/lb1.png"/> </div>
                <div class="pic"><img src="/static/img/lb2.png"/></div>
                <div class="pic"><img src="/static/img/lb3.png"/></div>
                <div class="pic"><img src="/static/img/lb4.png"/></div>
                <div class="pic"><img src="/static/img/lb5.png"/></div>
                <div class="pic"><img src="/static/img/lb1.png"/> </div>
            </div>
        </div>
        <%--右--%>
        <div class="col-md-2 right">right</div>
    </div>
</div>


<div id="result" onmouseenter="this.style.display='block'"  onmouseleave="this.style.display='none'">
    <%--页面布局--%>
    <%--<div class="row line">
        <div class="col-md-2 second">2</div>
        <div class="col-md-10 third">3</div>
    </div>

    <div class="row line">
        <div class="col-md-2 second">2</div>
        <div class="col-md-10 third">3</div>
    </div>

    <div class="row line">
        <div class="col-md-2 second">2</div>
        <div class="col-md-10 third">3</div>
    </div>--%>
</div>

<%--绝对定位在middel上--%>
<div id="middle_abs" onmouseenter="clearInterval(V)" onmouseleave="V=setInterval('showLBT()',1000)">
    <%--将四个圆在abs内相对定位--%>
    <div class="abs" onmouseenter="showIMG(1)" onmouseleave="showIMG(0)">1</div>
    <div class="abs" onmouseenter="showIMG(2)" onmouseleave="showIMG(0)">2</div>
    <div class="abs" onmouseenter="showIMG(3)" onmouseleave="showIMG(0)">3</div>
    <div class="abs" onmouseenter="showIMG(4)" onmouseleave="showIMG(0)">4</div>
    <div class="abs" onmouseenter="showIMG(5)" onmouseleave="showIMG(0)">5</div>
</div>

<script type="text/javascript">
    //从页面加载开始
    $(function () {
        //jquery获得所有.middle  --$(".middel")
        //dom获得所有.middle  --document.getElementsByClassName("middle")
        //alert( $(".middel")+"===="+document.getElementsByClassName("middle"));
        /*$(".middel").html("");
        document.getElementsByClassName("middle")[0].innerHTML="";
        document.getElementsByClassName("middle")[0].scrollLeft; //dom滚动条的左边距
        $(".middel:eq(0)")[0].scrollLeft;//jquery对象转为dom*/

        local=0;
        //改变属性值  DOM
        //alert($(".middel")[0]+"====");
        //0 780 1560 2340 3120 3900
        V=setInterval("showLBT()",1000);//定时器

        //设置圆圈的位置
        for(var x=0;x<$(".abs").length;x++) {
            $(".abs:eq("+x+")").css("top", 390-20*x+"px").css("left", 300+30*x+"px");// var d=document.getElementsByClassName("abs");   d[0].innerHTML;
        }
    })

    function showIMG(index){
        if(index==0){
            $(".abs").css("background-color","#ff0000");
            return;
        }
        //1 2 3 4 5
        //0 780 1560....
        local=(index-1)*780;
        $(".middel")[0].scrollLeft=local;
        //修改圆圈的背景色
        $(".abs:eq("+(index-1)+")").css("background-color","#ffffff");
    }
    
    function showLBT() {

        $(".middel")[0].scrollLeft=local;//改变滚动条的左间距
        local+=780;//local+=10;
        /*if(local%780==0){
            //停止定时器
            //过3秒后再次启动定时器  setTimeout
        }*/
        if(local==3900)
            local=0;//从头开始
    }
</script>
</body>
</html>
